import React, { Component } from 'react'

// Different from "Header", use "state full class components"
export default class Input extends Component{
    constructor(props){
        super(props);
    }

    handleChange =(event) => {
        this.props.handleChange(event);
    }
    
    handleSubmit =(event) => {
        // Randomly selected images
        this.props.handleSubmit(event);
    }

    render(){
        // // Create reaction elements using JSX
        return(
            <div className="input-body column">
                <input
                    type="text"
                    name="TopTextNew"
                    placeholder="Top text"
                    onChange={this.handleChange}
                />
                <input
                    type="text"
                    name="BottomTextNew"
                    placeholder="Bottom text"
                    onChange={this.handleChange}
                />
                <button onClick={this.handleSubmit}>Go!</button>
            </div>
        )
    }
}
